<template>
    <div class="options-panel">

        <div v-show="currentPanel == 'property'">
            <div class="panel-from">

                <div class="panel-form-item check">
                    <div class="item-label">显示标题</div>
                    <div class="item-input">
                        <a-switch size="small" v-model:checked="selectItem.componentProps.showTitle" />
                    </div>
                </div>

                <div class="panel-form-item check">
                    <div class="item-label">有边框</div>
                    <div class="item-input">
                        <a-switch size="small" v-model:checked="selectItem.componentProps.bordered" />
                    </div>
                </div>

                <div class="panel-form-item check">
                    <div class="item-label">隐藏</div>
                    <div class="item-input">
                        <a-switch size="small" v-model:checked="selectItem.componentProps.hidden" />
                    </div>
                </div>

            </div>
        </div>

        <div v-show="currentPanel == 'style'">

            <div class="panel-from">

                <a-divider orientation="left">内容区域样式</a-divider>
                
                <div class="panel-form-item">
                    <div class="item-label">高度</div>
                    <div class="item-input">
                        <a-input v-model:value="selectItem.componentProps.bodyStyle.height" placeholder="请输入" :min="0"
                            style="width: 100%;" />
                    </div>
                </div>
                <div class="panel-form-item">
                    <div class="item-label">内边距</div>
                    <div class="item-input">
                        <a-input v-model:value="selectItem.componentProps.bodyStyle.padding" placeholder="请输入" :min="0"
                            style="width: 100%;" />
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>

export default {
    name: "inputOptions",
    props: {
        currentPanel: {
            type: String,
            default: "property"
        },
        selectItem: {
            type: Object,
        }
    },
    data() {
        return {
            item: {},
            styleValue: {
                height: "",
                heightUnit: "px",
                padding: "",
                paddingUnit: "px",
            },
            unitData: ['px', '%', 'em', 'rem', 'pt', 'vw', 'vh'],
        }
    },
    methods: {
        /**
         * @method
         * @param {String} value 高度的值 
         * @desc 修改高度
         */
        changeHeight(value) {
            if (value != null) {
                this.selectItem.componentProps.bodyStyle.height = this.styleValue.height + this.styleValue.heightUnit
            } else {
                this.selectItem.componentProps.bodyStyle.height = "";
                delete this.selectItem.componentProps.bodyStyle.height;
            }
        },

        /**
         * @method
         * @param {String} value 内边距的值 
         * @desc 修改内边距
         */
        changePadding(value) {
            if (value != null) {
                this.selectItem.componentProps.bodyStyle.padding = this.styleValue.padding + this.styleValue.paddingUnit
            } else {
                this.selectItem.componentProps.bodyStyle.padding = "";
                delete this.selectItem.componentProps.bodyStyle.padding;
            }
        },

    },
    mounted() {
    },
    created() {
        // this.selectItem.componentProps = {
        //     style: {}
        // }
    },
}
</script>

<style>
</style>